import { useEffect, useRef } from 'react';
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import { GaugeChart } from 'echarts/charts';

import {
    GridComponent,
    DatasetComponent,
    LegendComponent
} from 'echarts/components';

echarts.use([
    GridComponent,
    TitleComponent,
    TooltipComponent,
    DatasetComponent,
    LegendComponent,
    BarChart,
    CanvasRenderer
]);

echarts.use([TitleComponent, TooltipComponent, BarChart, CanvasRenderer, PieChart, GaugeChart]);

const EChartsComponent = () => {
    const chartRef = useRef(null);
    const chartInstance = useRef(null); // 用于存储图表实例

    useEffect(() => {
        const chart = echarts.init(chartRef.current);

        // 初始化图表实例
        chartInstance.current = chart;

        const Xdata = ["0-1岁", "1-12岁", "13-25岁", "26-40岁", "41-55岁", "56-65岁", "66-75岁", "76-85岁", "85岁以上"];
        // 左侧数据
        const LF_val = [98, 102, 189, 456, 666, 813, 500, 813, 700, 200];
        // 右侧数据
        const TS_val = [98, 102, 189, 456, 666, 700, 600, 800, 512, 324];
        let option = {
            backgroundColor: "#03171f",
            legend: {
                show: false,
                top: "1%",
                right: "center",
                textStyle: {
                    color: "#000",
                },
                itemWidth: 16,
                itemHeight: 10,
            },
            tooltip: {
                show: true,
                trigger: "item",
                axisPointer: {
                    type: "shadow",
                    textStyle: {
                        color: "#fff",
                    },
                },
                textStyle: {
                    color: "#fff",
                },
                backgroundColor: "rgba(16, 123, 184, .52)", //设置背景颜色
                borderColor: "rgba(255, 255, 255, 0)",
                confine: true,
                formatter: "{b}<br />{a}: {c}人",
            },
            grid: [
                // 左侧
                {
                    show: false,
                    left: "3%",
                    top: "4%",
                    bottom: "10%",
                    containLabel: true,
                    width: "39%",
                },
                // 文字
                {
                    show: false,
                    left: "51.5%",
                    top: "4.3%",
                    bottom: "19.8%",
                    width: "26%",
                },
                // 右侧
                {
                    show: false,
                    right: "3.1%",
                    top: "4%",
                    bottom: "10%",
                    containLabel: true,
                    width: "39%",
                },
            ],
            xAxis: [
                {
                    type: "value",
                    inverse: true,
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "rgba(36, 148, 236, 0.29)",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    min: 0,
                    max: 1000,
                    position: "bottom",
                    axisLabel: {
                        show: true,
                        position: "outside",
                        textStyle: {
                            color: "#ffffff",
                            fontSize: "12px",
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: "line",
                            color: "rgba(36, 148, 236, 0.29)",
                        },
                    },
                },
                {
                    gridIndex: 1,
                    show: false,
                },
                {
                    gridIndex: 2,
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "rgba(36, 148, 236, 0.2)",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    min: 0,
                    max: 1000,
                    position: "bottom",
                    axisLabel: {
                        show: true,
                        position: "outside",
                        textStyle: {
                            color: "#ffffff",
                            fontSize: "12px",
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(36, 148, 236, 0.2)",
                            type: "dashed",
                        },
                    },
                },
            ],
            yAxis: [
                {
                    name: "",
                    position: "bottom",
                    nameTextStyle: {
                        color: "#ffffff",
                        fontWeight: 400,
                        fontSize: "14px",
                        padding: [12, 150, 0, 0],
                    },
                    gridIndex: 0,
                    type: "category",
                    inverse: false,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 1,
                            color: "rgba(36, 148, 236, 0.2)",
                        },
                    },
                    axisTick: {
                        show: false,
                    },

                    axisLabel: {
                        show: false,
                        textStyle: {
                            color: "#fff",
                            fontSize: 14,
                        },
                    },
                    data: Xdata,
                },
                {
                    gridIndex: 1,
                    type: "category",
                    inverse: false,
                    position: "left",
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#fff",
                            fontSize: "13px",
                        },
                    },
                    data: Xdata.map((value) => {
                        return {
                            value: value,
                            textStyle: {
                                color: "#fff",
                                align: "center",
                                top: "center",
                            },
                        };
                    }),
                },
                {
                    name: "",
                    position: "bottom",
                    nameTextStyle: {
                        color: "#ffffff",
                        fontWeight: 400,
                        fontSize: "16px",
                        padding: [12, 0, 0, 150],
                    },
                    gridIndex: 2,
                    type: "category",
                    inverse: false,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            width: 1,
                            color: "rgba(36, 148, 236, 0.2)",
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                        textStyle: {
                            color: "#BDD8FB",
                            fontSize: 14,
                        },
                    },
                    data: Xdata,
                },
            ],
            series: [
                // 左边
                {
                    name: "男性",
                    type: "bar",
                    stack: "one",
                    realtimeSort: false,
                    barGap: 10,
                    barWidth: "10px",
                    xAxisIndex: 0,
                    yAxisIndex: 0,
                    showBackground: true,
                    backgroundStyle: {
                        color: "rgba(32, 46, 76, 1)",
                        // borderRadius: [5, 5, 5, 5],
                    },
                    label: {
                        show: true,
                        position: "left",
                        offset: [25, -12],
                        textStyle: {
                            color: "#fff",
                            fontSize: "12px",
                        },
                        formatter: "{c}人",
                        emphasis: {
                            show: true,
                            position: "left",
                            offset: [25, -12],
                            textStyle: {
                                color: "#fff",
                                fontSize: "12px",
                            },
                        },
                    },
                    itemStyle: {
                        color: {
                            type: "linear",
                            x: 0, // 右
                            y: 0, // 下
                            x2: 1, // 左
                            y2: 0, // 上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "#4af0e0", // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "#4af0e0", // 100% 处的颜色
                                },
                            ],
                            global: false, //设置为false 使得渐变色不受全局影响
                        },
                        // borderRadius: [5, 5, 5, 5], // 设置圆角半径
                    },
                    // 左侧数据
                    data: LF_val,
                },
                // 右边
                {
                    name: "女性",
                    stack: "right",
                    type: "bar",
                    realtimeSort: false,
                    barGap: 10,
                    barWidth: "10px",
                    xAxisIndex: 2,
                    yAxisIndex: 2,
                    showBackground: true,
                    backgroundStyle: {
                        color: "rgba(32, 46, 76, 1)",
                        // borderRadius: [5, 5, 5, 5],
                    },
                    label: {
                        show: true,
                        position: "right",
                        offset: [-20, -12],
                        textStyle: {
                            color: "#fff",
                            fontSize: "12px",
                        },
                        formatter: "{c}人",
                        emphasis: {
                            show: true,
                            position: "right",
                            offset: [-20, -12],
                            textStyle: {
                                color: "#fff",
                                fontSize: "12px",
                            },
                        },
                    },
                    itemStyle: {
                        color: {
                            type: "linear",
                            x: 1, // 右
                            y: 0, // 下
                            x2: 0, // 左
                            y2: 0, // 上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "rgb(226, 32, 197)", // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "rgb(226, 32, 197)", // 100% 处的颜色
                                },
                            ],
                        },
                        // borderRadius: [5, 5, 5, 5], // 设置圆角半径,
                    },
                    // 右侧数据
                    data: TS_val,
                },
            ],
        };

        chart.setOption(option);
        // 监听容器大小变化
        const resizeObserver = new ResizeObserver(() => {
            chart.resize();
        });
        resizeObserver.observe(chartRef.current);

        return () => {
            chart.dispose();
            resizeObserver.disconnect();
        };
    }, []);

    return <div ref={chartRef} style={{ width: '28vw', height: '20vw', maxWidth: '85vw', maxHeight: '20vw' }}></div>;
};

export default EChartsComponent;

